<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-upload
            ref="upload"
            accept=".xlsx, .xls"
            :action="actionUrl"
            :limit="limitNum"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-exceed="overLimit"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
            :auto-upload="false"
        >
            <el-button slot="trigger" size="small" type="primary">
                选取文件
            </el-button>
        </el-upload>
        <div class="el-upload-tip">
            <p>
                下载导入模板：
                <el-link type="primary" :href="tempDownloadUrl">
                    模板下载
                </el-link>
            </p>
            <p>友情提示:</p>
            <p>导入数据行数不能超过{{ importNum }}条,注意数据格式,请清理空白行数据</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button :loading="loading" size="small" @click="closeDialog">
                取 消
            </el-button>
            <el-button :loading="loading" type="primary" size="small" @click="handelImport">
                导 入
            </el-button>
            <!-- <el-button v-if="loading===true" type="primary" size="small" @click="closeDialog">完 成</el-button> -->
        </span>
    </el-dialog>
</template>

<script>
import { dialogVisible } from '@/mixins/dialogMixin'
export default {
    mixins: [dialogVisible],
    props: {
        title: {
            type: String,
            default: '批量导入'
        },
        importNum: {
            type: Number,
            default: 1000
        },
        tempDownloadUrl: {
            type: String,
            required: true
        },
        actionUrl: {
            type: String,
            required: true
        },
        limitNum: {
            type: Number,
            default: () => {
                return 1
            }
        }
    },
    data() {
        return {
            loading: false,
            fileList: [
                {
                    name: 'food.jpeg',
                    url:
                        'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                },
                {
                    name: 'food2.jpeg',
                    url:
                        'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }
            ]
        }
    },
    mounted() {},
    methods: {
        handelImport() {
            // this.loading = true
            this.$refs.upload.submit()
        },
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        // 文件个数超出限制
        overLimit() {},
        // 上传成功
        handleSuccess() {
            this.loading = false
        },
        // 上传失败
        handleError() {
            this.loading = false
        }
    }
}
</script>
<style lang="scss" scoped>
.el-upload-tip {
    margin-top: 15px;
    p {
        line-height: 25px;
    }
}
</style>
